<template>
  <div id="points-list">
    <div class="content-record">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('member.points.list.all') " name="first"></el-tab-pane>
        <el-tab-pane :label="$t('member.points.list.addedToday') " name="second"></el-tab-pane>
        <el-tab-pane :label="$t('member.points.list.otherAdditions') " name="third"></el-tab-pane>
      </el-tabs>
      <div class="content-table">
        <el-table
            :data="recordArr"
            style="width: 100%">
            <el-table-column
              style="padding-left: 25px;"
              :label="$t('member.points.list.type') ">
              <template slot-scope="scope">
                <span> {{ $t('member.points.list.uPoints') }}</span>
              </template>

            </el-table-column>
            <el-table-column
              :label="$t('member.points.list.source') ">
              <template slot-scope="scope">
                <span>{{ 0.0000}}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('member.points.list.quantity') ">
              <template slot-scope="scope">
                <span>{{ 0.0000}}</span>
              </template>
            </el-table-column>
            <el-table-column style="padding-right: 25px;" align="right" width="180" :label="$t('member.points.list.transactionHour') ">
              <template slot-scope="scope">
                <span>2021-12-01 12:21</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @current-change="pageChange"
            :current-page.sync="pageNo"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="totalCount">
          </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { pointsArr } from '@/api/member/blance'
export default {
  data() {
    return {
      activeName: 'first',
      recordArr: [],
      totalCount: 1,
      pageNo: this.$route.query.page || 1,
    };
  },
  created() {
    this.getList();
  },
  mounted() {

  },
  methods: {
    getList(){
      pointsArr({
        page: this.pageNo,
        page_size: 10,
        start_time: '',
        end_time: '',
        type: '',
        log_type: '',
      }).then(res => {
        if(res.code == 0){
          let result = res.data;
          // this.totalCount = 
        }
      })
    },
    handleClick(tab, event){

    },
    // 页码切换
    pageChange(val) {
      this.replaceRouter(this.$route,{page: val})
      // this.getList();
    },
    replaceRouter(routerObj,obj){
      let queryMsg = JSON.parse(JSON.stringify(routerObj.query))
      this.$router.replace({
        name: routerObj.name,
        query: Object.assign(queryMsg,obj)
      })
    },
  }
};
</script>

<style lang="scss">
  #points-list {
    .el-tabs__item {
      height: 55px;
      line-height: 55px;
    }
    .el-tabs__nav-scroll {
      padding-left: 20px;
    }
    .content-table {
      th {
        color: #868686;
      }
      th:first-child,td:first-child {
        padding-left: 10px;
      }
      th:nth-child(4),td:nth-child(4) {
        padding-right: 20px;
      }
    }
  }
</style>

<style scoped lang="scss">
  .content-record {
    width: 100%;
    background: #fff;
  }
</style>
